import CSelectFormItem from '@/components/CSelectFormItem/CSelectFormItem'
import useEffectDictPage from '@/useEffect/useEffectDictPage'
import useEffectUserPage from '@/useEffect/useEffectUserPage'
import { Form, Space } from '@douyinfe/semi-ui'
import { OptionProps } from '@douyinfe/semi-ui/lib/es/select'

// 获取 下拉选的数据
export function getRequestSearchFormSelectData(modalVisible: boolean) {
  const { dictList } = useEffectDictPage(modalVisible, 'request_category')
  const { userList } = useEffectUserPage(modalVisible, true)
  return { dictList, userList }
}

interface IRequestSearchFormItem {
  userList: OptionProps[]
  dictList: OptionProps[]
}

export default function RequestSearchFormItem(props: IRequestSearchFormItem) {
  return (
    <>
      <Form.Input field="name" showClear label="接口名" />
      <Form.Input field="uri" showClear label="uri" />
      <CSelectFormItem
        field={'createId'}
        label={'用户名'}
        optionList={props.userList}
      />
      <Form.Input field="ip" showClear label="ip" />
      <Form.Input field="region" showClear label="ip区域" />
      <CSelectFormItem
        field={'category'}
        label={'来源'}
        optionList={props.dictList}
      />
      <Space className="flex ai-e">
        <Form.InputNumber
          field="beginTimeNumber"
          label="耗时（毫秒）"
          min={0}
          showClear
        />
        <Space className="flex-center">
          <span> - </span>
          <Form.InputNumber noLabel field="endTimeNumber" min={0} showClear />
        </Space>
      </Space>
      <Form.DatePicker
        field="createTimeList"
        label="创建时间"
        type="dateTimeRange"
      />
    </>
  )
}
